<template>
	<div class="stepone">
		<div class="head">
			<div>选择一下你的年级吧</div>
			<div>可以推荐给您更多何时的课程哦</div>
		</div>
		<div class="con">
			<div><img src="../../images/g.png" alt="" /></div>
			<div class="dw cz">初中</div>
			<div class="dw gz">高中</div>
			<div class="dw xx">小学</div>
		</div>
		<div class="bot">
			<router-link tag="div" to="/tow" class="btn">下一步</router-link>
			<div class="ma">放心选择 以后还可以更改哦</div>
			<router-link tag="div" to="/tow">跳过选择》</router-link>
		</div>
	</div>
</template>

<script>
	export default{
		name:"stepone",
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="less">
	.stepone{
		.bot{
			.btn{
				width: 150/50rem;
				height: 50/50rem;
				line-height: 50/50rem;
				border-radius: 5/50rem;
				margin: 0 auto;
				font-size: 18/50rem;
				/*padding: 10/50rem 30/50rem;*/
				border: 1/50rem solid #3AAE95;
			}
			.ma{
				margin-top: 10/50rem;
			}
			div{
				color:#3AAE95;
				font-size: 16/50rem;
				text-align: center;
				height: 30/50rem;
				line-height: 30/50rem;
			}
		}
		.head{
			margin-top: 50/50rem;
			div{
				text-align: center;
				color:#3AAE95;
				font-size: 20/50rem;
				height: 30/50rem;
				line-height: 30/50rem;
			}
		}
		.con{
			position: relative;
			margin-top: 250/50rem;
			width: 150/50rem;
			margin: 100/50rem auto;
			img{
				width: 100/50rem;
				height: 200/50rem;
			}
			.dw{
				position: absolute;
				color:#fff;
				font-size: 16/50rem;
			}
			.cz{
				top: -20/50rem;
				left: 10/50rem;
				width: 80/50rem;
				height: 80/50rem;
				background: #3AAE95;
				border-radius: 50%;
				text-align: center;
				line-height: 80/50rem;
			}
			.gz{
				top: 65/50rem;
				left: 60/50rem;
				width: 100/50rem;
				height: 100/50rem;
				background: #3AAE95;
				border-radius: 50%;
				text-align: center;
				line-height: 100/50rem;
			}
			.xx{
				top: 130/50rem;
				left: -30/50rem;
				width: 80/50rem;
				height: 80/50rem;
				background: #3AAE95;
				border-radius: 50%;
				text-align: center;
				line-height: 80/50rem;
			}
		}
	}
</style>